<template>
	<view class="root">
		<view class="header">
			<map style="width: 100%; height: 300px;" 
				:latitude="latitude" 
				:longitude="logitude"
				:markers="markers"
				>
			</map>
		</view>
		<view class="body">
			<view class="list">
				<view class="item">
					<view class="top">
						<uni-icons type="location-filled" size="30"></uni-icons>
						<view class="location">当前位置：绿地中央广场</view>
					</view>
					<view class="middle">
						主营：家电日 | 废纸
					</view>
					<view class="down">
						<button class="order-button">去下单</button>
					</view>
				</view>
				<view class="item">
					<view class="top">
						<button>回收指南</button>
					</view>
					<view class="main">
						<view class="icon-list">
							<view class="icon-item">
								<image src="@/static/recycle-guide/online-order.png" mode=""></image>
								<view class="text">在线下单</view>
							</view>
							<view class="icon-item">
								<image src="@/static/recycle-guide/free-down.png" mode=""></image>
								<view class="text">
									免费上门
								</view>
							</view>
							<view class="icon-item">
								<image src="@/static/recycle-guide/dealing.png" mode=""></image>
								<view class="text">
									进行交易
								</view>
							</view>
							<view class="icon-item">
								<image src="@/static/recycle-guide/complete-order.png" mode=""></image>
								<view class="text">
									完成订单
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="top">
						<button>详细咨询</button>
					</view>
					<view class="main">
						<view class="text1">
							扫码加微信
						</view>
						<view class="img-container">
							<image src="@/static/wx-add-qr-code/add-qr-code.png"></image>
						</view>
						<view class="text2">
							或
						</view>
						<view class="icon-container">
							<uni-icons class="icon" type="phone" size="30"></uni-icons>
						</view>
						<view class="phone">
							15777777777
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<acquire-location-popup></acquire-location-popup>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad, onShow} from '@dcloudio/uni-app'
	const latitude = ref('39.9')
	const logitude = ref('116.4')
	    
	const markers = ref( [{
			latitude: 39.909,
			longitude: 116.39742,
			iconPath: '@/static/icon/success-icon.png'
		}, {
			latitude: 39.90,
			longitude: 116.39,
			iconPath: '@/static/icon/success-icon.png'
		}]
	)
	
	uni.getLocation({
		type:'gcj02',
		isHighAccuracy:true,
		success(res) {
			console.log(`(${res.longitude}, ${res.latitude})`)
		}
	})
	
	
	
	
</script>

<style lang="scss" scoped>
	.root {
		position: relative;
		.header {
			height: 500rpx;
		}
		.body {
			position: relative;
			top: -60px;
			width: 100%;
			.list {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				.item {
					border: 4rpx solid #cdcdcd;
					border-radius: 34rpx;
					height: 260rpx;
					background-color: white;
					display: flex;
					flex-direction: column;
				}
				&>.item:first-child {
					gap: 20rpx;
					.top {
						display: flex;
						flex-direction: row;
					}
					.middle {
						
					}
					.down {
						.order-button {
							background-color: #2ec076;
							font-weight: 700;
							color: white;
							width: 70%;
						}
					}
				}
				
				&>.item:nth-child(2) {
					padding-top: 15rpx;
					gap: 20rpx;
					.top {
						button {
							width: 40%;
							background-color: #2ec076;
							color: white;
							font-weight: 700;
							border-radius: 50rpx;
							height: 80rpx;
							line-height: 80rpx;
						}
					}
					.main {
						.icon-list {
							display: flex;
							justify-content: center;
							align-items: center;
							.icon-item {
								width: 150rpx;
								image {
									width: 70rpx;
									height: 70rpx;
								}
							}
						}
					}
				}
				&>.item:nth-child(3) {
					padding-top: 15rpx;
					gap: 20rpx;
					.top {
						button {
							width: 40%;
							background-color: #2ec076;
							color: white;
							font-weight: 700;
							border-radius: 50rpx;
							height: 80rpx;
							line-height: 80rpx;
						}
					}
					.main {
						display: flex;
						gap: 20rpx;
						justify-content: center;
						align-items: center;
						.text1 {
							
						}
						.img-container {
							width: 100rpx;
							height: 100rpx;
							image {
								width: 100%;
								height: 100%;
							}
						}
						
						.text2 {
							
						}
						.icon-container {
							transform: rotate(180deg);
							.icon {
								
							}
						}
						.phone {
							
						}
					}
				}
			}
		}
	}
</style>
